import React, {PureComponent} from "react";
import QueueAnim from 'rc-queue-anim'
import Item from './Item'
let arrJSQ = []

export default class extends PureComponent {
  constructor(props) {
    super(props);
   
    this.state = {
    
    };
  this.countDownStr =  this.countDownStr.bind(this)
    
  }

  componentDidMount() {
  }
  

  p(s) {
    return s < 10 ? "0" + s : s;
  }

  countDownStr(){
    let that = this
    let {itemData} = this.props
    if(itemData.length>0){


      this.temp  =  setInterval(()=>{
        itemData.map((item,index)=>{
         if(item.countdown==1){
           var h = $("#h"+item.loanId).text();
           var m = $("#m"+item.loanId).text();
           var s = $("#s"+item.loanId).text();
           if(s==0){
               s = 60;
               if(m==0){
                   m = 60;
                   if(h==0){
                       $('#timeOut'+item.loanId).find('.countdownBox').hide()
                       $('#timeOut'+item.loanId).find('.blueCircle').show()
                       clearInterval(this.temp);
                   }
                   $("#h"+item.loanId).text(that.p(h-1));
               }
               $("#m"+item.loanId).text(that.p(m-1));
           }
           $("#s"+item.loanId).text(that.p(s-1));
          }
         })
       },1000);

    }
   
  }

  componentWillUnmount(){
      clearInterval(this.temp)
  }

  render() {
    let that = this
    let {itemData} = this.props
    clearInterval(this.temp)
    let myList = itemData.map((item,index)=>{
        return(<Item key={index}  item={item}></Item>)
     }) 
     this.countDownStr()
    
    return (
       <div>
       <QueueAnim 
          type="bottom"
          ease={['easeOutQuart', 'easeInOutQuart']}
         >
         {myList}
         </QueueAnim>
       </div> 
    );
  }
}